<!DOCTYPE html>
<html>
	<head>
  		<meta charset="utf-8">
		<title>liquidGauge</title>
		<link href="../css/public.css" rel="stylesheet">			
	</head>
	<body>
	</body>
	<script type="text/javascript" src="../vendor/d3/d3.min.js"></script>
	<script type="text/javascript" src="../componments/container.js"></script>
      <script type="text/javascript" src="../componments/liquidGauge.js"></script>	
	<script>
      	//初始化页面
      	function init() {
                  //初始化容器
      		var container = new Container({
      			dom: d3.select('body').append('div').attr('class', 'container'),
      			dataUrl: ['../data/testData1.json', '../data/testData2.json'],
      			padding: {top:80, right:50, left:50, bottom:40},
      			width: document.documentElement.clientWidth,
      			height: document.documentElement.clientHeight,
                        refreshTime: 4000
      		});
                  
      		container.init();

                  var liquidGauge = new LiquidGauge({
                        animationTime: 8000,
                        graph: container.svg,
                        radius: 150,
                        circleX : container.innerWidth / 2 - 150,
                        circleY : container.innerHeight / 2 - 150
                  });

                  liquidGauge.init();

                  liquidGauge.draw(0.5);

                  // setTimeout(function(){
                  //       liquidGauge.render(0.6);
                  // }, 2000)

      		container.getData(function(res){

                        // liquidGauge.draw(res);
      		});

      	}

      	init();


	</script>
</html>